<template>
    <div>
      <div  class="menulogo" @click="isShowMenu">
        <img src="../../static/menu2.png" style="width: 46px;" v-show="isShow">
        <img src="../../static/menu3.png" style="width: 46px" v-show="!isShow">
      </div>
      <div class="menu-nav" v-show="isShow">
        <ul>
          <template v-for="item in menudata.data">
            <!--{{item.menu_name}}-->
            <template v-if="item.url">
              <li class="secondmenu"><router-link :to="item.url">{{item.menu_name}}+{{item.url}}</router-link></li>
            </template>
            <template v-else>
              <li class="firstmenu"><router-link :to="item.url">{{item.menu_name}}</router-link></li>
            </template>
            <!--<router-link to={{item.url}}>{{item.menu_name}}</router-link>-->
          </template>
        </ul>
      </div>
      <div class="content">
        <router-view></router-view>
      </div>
    </div>
</template>

<script scoped>
  import menudata from '../../static/getMenuList.json'
    export default {
      name: 'Menu',
      data () {
        return {
          menudata: menudata,
          isShow:false
        }
      },
      created()
      {
        console.log("created")
      },
      mounted(){
          console.log(menudata.data)
//        this.getMenuList()
      },
      methods:{
        isShowMenu(){
          console.log(this.isShow)
          this.isShow=!this.isShow;
        }
      }
    }
</script>

<style lang="less" scoped>
  .menulogo{
    position: absolute;
    z-index: 12;
  }
  .menu-nav{
    position: absolute;
    background-color:wheat;
    /*height:500px;*/
    margin-top: 60px;
    width:400px;
    ul{
      padding: 0;
    }
    li{
      border-bottom: 1px solid #eeac29;
      list-style: none;
      text-align: left;
      padding-left: 20px;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .firstmenu{
      font-size: 18px;
      /*background-color:wheat;*/
    }
  .secondmenu{
    font-size: 16px;
    text-indent:30px;
  }
  }

  .content{
    position: absolute;
    left:400px;
    padding: 10px;
    background-color:#EEEEEE;
    height:500px;
    width: 100%;
  }
</style>
